<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #body1 {
            background-color: #F0F0F0;
        }

        #main3 {
            margin-top: 20px;
            width: 90%;
            height: 600px;

        }

    </style>


    <script type="text/javascript" src="../../common/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../common/echars/echarts.min.js"></script>
    <!--
        1.引入jquery
        2.写一个echart 布局
        3.初始化echarts
    -->
    <script type="text/javascript">
        /**
         *充值统计
         */
        var months;
        var values;
        $(function () {
            $.ajax({
                url: "/GetOrderCensusServlet",
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    var data = result.data;
                    console.log(data);
                    // 使用刚指定的配置项和数据显示图表。
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main3'));
                    // 指定图表的配置项和数据
                    var option = {
                        backgroundColor: '#2c343c',

                        title: {
                            text: '销售统计',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#ccc'
                            }
                        },

                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },

                        visualMap: {
                            show: false,
                            min: 80,
                            max: 600,
                            inRange: {
                                colorLightness: [0, 1]
                            }
                        },
                        series: [
                            {
                                name: '销售统计',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '50%'],
                                data: data,
                                roseType: 'radius',
                                label: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                labelLine: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                },
                                itemStyle: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },

                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            })
        })
    </script>
</head>
<body>

<body id="body1">
<center>
    <div id="main3"></div>
</center>
</body>

</body>
</html>